<template>
    <div>
        <el-form :inline="true" class="clearfix">
            <div class="fl query-l">
                <div class="fl">
                    <div>
                        <el-form-item label="悬赏编号">
                            <el-input v-model = "data.rewardNo"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="悬赏名称">
                            <el-input v-model = "data.name"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="fl">
                    <div>
                        <el-form-item label="发包性质">
                            <el-select clearable placeholder="请选择" v-model="data.isInternal.value">
                                <el-option
                                    v-for = "item in data.isInternal.options"
                                    :key = "item.value"
                                    :label = "item.label"
                                    :value = "item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="报名人数">
                            <el-select clearable placeholder="请选择" v-model="data.hasAnyoneApply.value">
                                <el-option
                                    v-for = "item in data.hasAnyoneApply.options"
                                    :key = "item.value"
                                    :label = "item.label"
                                    :value = "item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div class="fl">
                    <div>
                        <el-form-item label="发布时间">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model = "data.publishTimeStart"
                            >
                            </el-date-picker>
                            <span> 至 </span>
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model = "data.publishTimeEnd"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="跟进状态">
                            <el-select clearable placeholder="请选择" v-model="data.handleStatus.value">
                                <el-option
                                    v-for = "item in data.handleStatus.options"
                                    :key = "item.value"
                                    :label = "item.label"
                                    :value = "item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <div class="fr">
                <el-button type="primary" @click="queryForUnderway">查询</el-button>
            </div>
            </el-form>
            <el-table :data="data.list" border row-class-name="text-center" height="364" class="user-table"  style="width:100%">
                <el-table-column label="编号" :show-overflow-tooltip = "true" prop="rewardNo">
                </el-table-column>
                <el-table-column label="名称" :show-overflow-tooltip = "true">
                    <template scope="scope">
                        <router-link :to="`/project/caseDetail?id=${scope.row.id}`" class="color02 pointer">
                            <span @click="keepLive">{{scope.row.name}}</span>
                        </router-link>
                        <span v-if = "scope.row.isInternal == 1" class="isInternal-icon">内</span>
                    </template>

                </el-table-column>
                <el-table-column label="赏金" :show-overflow-tooltip="true" prop="bounty">
                </el-table-column>
                <el-table-column label="周期" :show-overflow-tooltip="true" prop="expectedDuration">
                </el-table-column>
                <el-table-column label="发布人" :show-overflow-tooltip = "true">
                     <template scope="scope">
                        <span @click = "getUserInfo(scope.row.userAccountId, 1)" class="color02 pointer">{{scope.row.userAccountName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" :show-overflow-tooltip = "true" prop="publishTime">
                </el-table-column>
                <el-table-column label="报名人数" :show-overflow-tooltip = "true" prop="applyCount">
                    <template scope="scope">
                        <span @click = "showApplyCountActive(scope)" class="color02 pointer">{{scope.row.applyCount}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="跟进状态" :show-overflow-tooltip = "true" >
                    <template scope="scope">
                         <span>{{scope.handleStatus>1?`已受理`:`未受理`}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目专员" :show-overflow-tooltip = "true">
                    <template scope="scope">
                            <el-select  placeholder="请选择" v-model="scope.row.specialistName" @change="changeSpecialistName(scope)" @visible-change="beforeSelectSpecialistName" size="mini">
                                <el-option v-for="item in specialist"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="147">
                    <template scope="scope">
                        <span @click="followShowFn(scope.row.id)" class="color02 pointer mr-10">跟进记录</span>
                        <el-dropdown trigger="click">
                            <div class="more-menu menu-center"></div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item ><router-link to="/project/caseDetail"><div>编辑</div></router-link></el-dropdown-item>
                                <el-dropdown-item @click.native.prevent="closeProjectFn">关闭</el-dropdown-item>
                                <el-dropdown-item @click.native.prevent = "setNotShow(scope.row.id)">设为主站不显示</el-dropdown-item>
                                <el-dropdown-item @click.native.prevent = "setInterior(scope.row.id,scope)">设为内部项目</el-dropdown-item>
                                <el-dropdown-item  @click.native.prevent = "showLogFn(scope.row.id)">操作记录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
             <div class="pagination-wrapper clearfix" v-if="data.totalPage>1">
                <div class="fr mt-10">
                    <span class="page-num font-14">
                        总数：<span v-text="100"></span> 每页显示 <span v-text="5"></span>  条 共 <span v-text="100"></span> 页
                    </span>
                    <el-pagination class="fr" @current-change="changePage" :current-page="data.currentPage" :page-size="data.pageSize" layout="prev, pager, next" :total="data.totalCount">
                    </el-pagination>
                </div>
            </div>
    </div>
</template>
<script>
    export default {
        props: ['data', 'showUserAccoun', 'showApplyCount', 'specialist', 'follow'],
        data () {
            return {
                isSelectSpecialistName: false
            }
        },
        methods: {
            keepLive () {
                this.$emit('keepLive')
            },
            queryForUnderway () {
                this.$emit('query')
            },
            closeProjectFn () {
                this.$emit('closeProjectFn')
            },
            setNotShow (id) {
                this.$emit('setNotShow', id)
            },
            setInterior (id, scope) {
                this.$emit('setInterior', id, scope)
            },
            showLogFn (id) {
                this.$emit('showLogFn', 1, 10, id)
            },
            changePage (currentPage) {
                this.$emit('changePage', currentPage)
            },
            followShowFn (id) {
                this.$emit('followShowFn', 1, 10, id)
            },
            beforeSelectSpecialistName (isSelect) {
                this.isSelectSpecialistName = isSelect
            },
            changeSpecialistName (scope) {
                this.$emit('changeSpecialistName', scope, this.isSelectSpecialistName)
            },
            showApplyCountActive (scope) {
                this.showApplyCount.show = true
                this.$emit('getSchemeList', 1, 10, scope.row.id)
            },
            getUserInfo (id, type) {
                this.$emit('getUserInfo', id, type)
            }
        }
    }
</script>
